<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent对话 - 智慧Agent平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
        }

        .chat-container {
            height: calc(100vh - 200px);
        }

        .message-animation {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .typing-indicator {
            display: inline-block;
        }

        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #9CA3AF;
            margin-right: 4px;
            animation: typing 1s infinite ease-in-out;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .wave-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }

        .wave-bg svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 150px;
        }

        .wave-bg .shape-fill {
            fill: #FFFFFF;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body class="min-h-screen">
    <header class="bg-white/80 backdrop-blur-sm shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-8">
                <div class="flex items-center space-x-3">
                    <a href="/" class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl font-bold text-blue-600">智慧Agent平台</h1>
                    </a>
                </div>
            </div>
            <div id="auth-buttons" class="flex items-center space-x-4">
                <!-- 动态内容由JavaScript填充 -->
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8 relative">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center space-x-4">
                <button onclick="window.location.href='/'" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    返回首页
                </button>
                <h2 id="agent-name" class="text-2xl font-bold text-gray-800">Agent对话</h2>
            </div>
            <div id="agent-info" class="flex items-center space-x-2">
                <!-- Agent信息将在这里动态加载 -->
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                <div class="flex items-center">
                    <div id="agent-avatar" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 id="agent-title" class="font-medium">AI助手</h3>
                        <p id="agent-model" class="text-xs text-gray-500">加载中...</p>
                    </div>
                </div>
                <button id="refresh-btn" class="text-gray-500 hover:text-blue-600 transition-colors p-2 rounded-full hover:bg-gray-100">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                </button>
            </div>

            <div id="chat-messages" class="chat-container p-4 overflow-y-auto custom-scrollbar">
                <div class="text-center py-12">
                    <lottie-player src="https://assets3.lottiefiles.com/packages/lf20_5tkzkblw.json"
                                  background="transparent"
                                  speed="1"
                                  style="width: 150px; height: 150px; margin: 0 auto;"
                                  loop
                                  autoplay></lottie-player>
                    <h3 class="text-xl font-medium text-gray-700 mt-4" id="greeting-message">正在加载对话...</h3>
                    <p class="text-gray-500 mt-2">开始与AI助手对话吧</p>
                </div>
            </div>

            <div class="p-4 border-t border-gray-200 bg-gray-50">
                <div class="flex items-center space-x-3">
                    <input id="message-input" type="text" placeholder="输入您的问题..."
                           class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                    <button id="send-btn" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-all shadow-md hover:shadow-lg flex items-center">
                        <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                        </svg>
                        发送
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-2 text-center">AI可能会产生不准确的信息，请谨慎参考</p>
            </div>
        </div>
    </main>

    <footer class="bg-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                        </div>
                        <span class="text-xl font-bold text-blue-600">智慧Agent平台</span>
                    </div>
                    <p class="text-gray-500 mt-2 text-sm">让智能服务改变生活</p>
                </div>

                <div class="flex flex-col space-y-2 text-sm text-gray-600">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        <span>邮箱: forzenzhencola@163.com</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        <span>电话: 15191913497</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>联系人: 王震</span>
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2025 王震. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 全局变量
        let currentAgentId = '';
        let isWaitingForResponse = false;

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            checkAuthStatus();
            initChat();
        });

        // 检查用户登录状态
        function checkAuthStatus() {
            const token = localStorage.getItem('access_token');
            const authButtons = document.getElementById('auth-buttons');

            if (token) {
                // 用户已登录
                try {
                    const userData = JSON.parse(localStorage.getItem('user_data'));
                    authButtons.innerHTML = `
                        <span class="text-gray-700">欢迎, ${userData.username}</span>
                        <a href="/admin" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2 rounded-lg hover:from-blue-700 hover:to-blue-600 transition-all shadow-md hover:shadow-lg">
                            管理后台
                        </a>
                        <button onclick="logout()" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2 rounded-lg hover:from-blue-700 hover:to-blue-600 transition-all shadow-md hover:shadow-lg">
                            退出登录
                        </button>
                    `;
                } catch (e) {
                    console.error('Error parsing user data:', e);
                    authButtons.innerHTML = `
                        <a href="/login" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2 rounded-lg hover:from-blue-700 hover:to-blue-600 transition-all shadow-md hover:shadow-lg">
                            点我登录
                        </a>
                    `;
                }
            } else {
                // 用户未登录
                authButtons.innerHTML = `
                    <a href="/login" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2 rounded-lg hover:from-blue-700 hover:to-blue-600 transition-all shadow-md hover:shadow-lg">
                        点我登录
                    </a>
                `;
            }
        }

        // 退出登录
        async function logout() {
            try {
                const response = await fetch('/api/logout', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
                        'Content-Type': 'application/json'
                    }
                });

                if (response.ok) {
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('user_data');
                    window.location.href = '/login';
                } else {
                    const data = await response.json();
                    alert(data.error || '退出登录失败');
                }
            } catch (error) {
                console.error('退出登录错误:', error);
                alert('网络错误，请稍后重试');
            }
        }

        // 初始化聊天
        function initChat() {
            // 从URL获取agent_id
            const urlParams = new URLSearchParams(window.location.search);
            currentAgentId = urlParams.get('agent_id');

            if (!currentAgentId) {
                showError('未指定Agent ID');
                return;
            }

            // 加载Agent信息
            loadAgentInfo(currentAgentId);

            // 设置事件监听器
            document.getElementById('send-btn').addEventListener('click', sendMessage);
            document.getElementById('message-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            document.getElementById('refresh-btn').addEventListener('click', resetChat);
        }

        // 加载Agent信息
        async function loadAgentInfo(agentId) {
            try {
                const token = localStorage.getItem('access_token');
                if (!token) {
                    throw new Error('请先登录');
                }

                const response = await fetch(`/api/agents/${agentId}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error('获取Agent信息失败');
                }

                const agent = await response.json();
                displayAgentInfo(agent);

                // 如果有欢迎消息，显示它
                if (agent.greeting_message) {
                    displayGreetingMessage(agent.greeting_message);
                }
            } catch (error) {
                console.error('加载Agent信息错误:', error);
                showError(error.message);
            }
        }

        // 显示Agent信息
        function displayAgentInfo(agent) {
            document.getElementById('agent-name').textContent = agent.name;
            document.getElementById('agent-title').textContent = agent.name;
            document.getElementById('agent-model').textContent = agent.llm_model_name || '未知模型';
            document.getElementById('greeting-message').textContent = agent.greeting_message || '开始与AI助手对话吧';

            // 更新Agent头像颜色
            const avatarColors = ['bg-blue-100', 'bg-purple-100', 'bg-green-100', 'bg-yellow-100', 'bg-pink-100', 'bg-indigo-100'];
            const textColors = ['text-blue-600', 'text-purple-600', 'text-green-600', 'text-yellow-600', 'text-pink-600', 'text-indigo-600'];

            const avatar = document.getElementById('agent-avatar');
            const icon = avatar.querySelector('svg');

            // 根据agent_id生成一个稳定的颜色索引
            const colorIndex = parseInt(agent.agent_id.replace(/[^0-9]/g, '').slice(0, 1)) % avatarColors.length;

            avatar.className = `w-10 h-10 rounded-full ${avatarColors[colorIndex]} flex items-center justify-center mr-3`;
            icon.className = `w-6 h-6 ${textColors[colorIndex]}`;
        }

        // 显示欢迎消息
        function displayGreetingMessage(message) {
            const chatMessages = document.getElementById('chat-messages');
            chatMessages.innerHTML = '';

            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-animation mb-4 flex';
            messageDiv.innerHTML = `
                <div class="flex-shrink-0 mr-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="bg-blue-50 rounded-lg p-4 inline-block">
                        <p class="text-gray-800">${message}</p>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">刚刚</p>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 发送消息
        async function sendMessage() {
            if (isWaitingForResponse) return;

            const input = document.getElementById('message-input');
            const message = input.value.trim();

            if (!message) return;

            // 添加用户消息到聊天界面
            addUserMessage(message);
            input.value = '';

            // 显示AI正在输入
            showTypingIndicator();

            try {
                isWaitingForResponse = true;

                const token = localStorage.getItem('access_token');
                if (!token) {
                    throw new Error('请先登录');
                }

                const response = await fetch(`/api/agents/chat/${currentAgentId}`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ query: message })
                });

                if (!response.ok) {
                    throw new Error('获取AI回复失败');
                }

                const data = await response.json();
                removeTypingIndicator();
                addAgentMessage(data.response, data.sources);
            } catch (error) {
                console.error('发送消息错误:', error);
                removeTypingIndicator();
                addErrorMessage(error.message);
            } finally {
                isWaitingForResponse = false;
            }
        }

        // 添加用户消息
        function addUserMessage(message) {
            const chatMessages = document.getElementById('chat-messages');

            // 如果当前是欢迎消息，清除它
            if (chatMessages.querySelector('.text-center')) {
                chatMessages.innerHTML = '';
            }

            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-animation mb-4 flex justify-end';
            messageDiv.innerHTML = `
                <div class="flex-1 max-w-3xl">
                    <div class="bg-blue-600 text-white rounded-lg p-4 inline-block">
                        <p>${message}</p>
                    </div>
                    <p class="text-xs text-gray-500 mt-1 text-right">刚刚</p>
                </div>
                <div class="flex-shrink-0 ml-3">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 添加AI消息
        function addAgentMessage(message, sources = []) {
            const chatMessages = document.getElementById('chat-messages');

            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-animation mb-4 flex';
            messageDiv.innerHTML = `
                <div class="flex-shrink-0 mr-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                </div>
                <div class="flex-1 max-w-3xl">
                    <div class="bg-blue-50 rounded-lg p-4 inline-block">
                        <p class="text-gray-800">${message}</p>
                        ${sources.length > 0 ? `
                        <div class="mt-3 pt-3 border-t border-gray-200">
                            <p class="text-xs text-gray-500 mb-2">参考资料:</p>
                            <div class="space-y-2">
                                ${sources.map(source => `
                                <div class="text-xs text-gray-600 p-2 bg-gray-100 rounded">
                                    <p>${source.text.substring(0, 100)}...</p>
                                    <p class="text-gray-400 mt-1">来源: ${source.metadata.source || '未知'}</p>
                                </div>
                                `).join('')}
                            </div>
                        </div>
                        ` : ''}
                    </div>
                    <p class="text-xs text-gray-500 mt-1">刚刚</p>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 添加错误消息
        function addErrorMessage(message) {
            const chatMessages = document.getElementById('chat-messages');

            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-animation mb-4 flex';
            messageDiv.innerHTML = `
                <div class="flex-shrink-0 mr-3">
                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="bg-red-50 rounded-lg p-4 inline-block">
                        <p class="text-red-800">${message}</p>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">刚刚</p>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 显示AI正在输入
        function showTypingIndicator() {
            const chatMessages = document.getElementById('chat-messages');

            const typingDiv = document.createElement('div');
            typingDiv.className = 'mb-4 flex';
            typingDiv.id = 'typing-indicator';
            typingDiv.innerHTML = `
                <div class="flex-shrink-0 mr-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="bg-blue-50 rounded-lg p-4 inline-block">
                        <div class="typing-indicator">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            `;

            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 移除AI正在输入指示器
        function removeTypingIndicator() {
            const typingDiv = document.getElementById('typing-indicator');
            if (typingDiv) {
                typingDiv.remove();
            }
        }

        // 重置聊天
        function resetChat() {
            if (isWaitingForResponse) return;

            const chatMessages = document.getElementById('chat-messages');
            chatMessages.innerHTML = '';

            // 重新加载Agent信息以显示欢迎消息
            loadAgentInfo(currentAgentId);
        }

        // 显示错误
        function showError(message) {
            const chatMessages = document.getElementById('chat-messages');
            chatMessages.innerHTML = `
                <div class="text-center py-12">
                    <svg class="w-12 h-12 text-red-500 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    <h3 class="text-xl font-medium text-gray-700 mt-4">${message}</h3>
                    <button onclick="window.location.href='/'" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all">
                        返回首页
                    </button>
                </div>
            `;
        }
    </script>
</body>
</html>